<script setup lang="ts">
import { defineVaDataTableColumns } from 'vuestic-ui'
import { Project } from '../../../projects/types'
import UserAvatar from '../../../users/widgets/UserAvatar.vue'
import ProjectStatusBadge from '../../../projects/components/ProjectStatusBadge.vue'
import { useProjects } from '../../../projects/composables/useProjects'
import { Pagination } from '../../../../data/pages/projects'
import { ref } from 'vue'

const columns = defineVaDataTableColumns([
  { label: 'Name', key: 'project_name', sortable: true },
  { label: 'Status', key: 'status', sortable: true },
  { label: 'Team', key: 'team', sortable: true },
])

const pagination = ref<Pagination>({ page: 1, perPage: 7, total: 0 })
const { projects, isLoading, sorting } = useProjects({
  pagination,
})

const avatarColor = (userName: string) => {
  const colors = ['primary', '#FFD43A', '#ADFF00', '#262824', 'danger']
  const index = userName.charCodeAt(0) % colors.length
  return colors[index]
}
</script>

<template>
  <VaCard>
    <VaCardTitle class="flex items-start justify-between">
      <h1 class="card-title text-secondary font-bold uppercase">Projects</h1>
      <VaButton preset="primary" size="small" to="/projects">View all projects</VaButton>
    </VaCardTitle>
    <VaCardContent>
      <div v-if="projects.length > 0">
        <VaDataTable
          v-model:sort-by="sorting.sortBy"
          v-model:sorting-order="sorting.sortingOrder"
          :items="projects"
          :columns="columns"
          :loading="isLoading"
        >
          <template #cell(project_name)="{ rowData }">
            <div class="ellipsis max-w-[230px] lg:max-w-[450px]">
              {{ rowData.project_name }}
            </div>
          </template>
          <template #cell(project_owner)="{ rowData }">
            <div class="flex items-center gap-2 ellipsis max-w-[230px]">
              <UserAvatar :user="rowData.project_owner" size="small" />
              {{ rowData.project_owner.fullname }}
            </div>
          </template>
          <template #cell(team)="{ rowData: project }">
            <VaAvatarGroup
              size="small"
              :options="
                (project as Project).team.map((user) => ({
                  label: user.fullname,
                  src: user.avatar,
                  fallbackText: user.fullname[0],
                  color: avatarColor(user.fullname),
                }))
              "
              :max="2"
            />
          </template>
          <template #cell(status)="{ rowData: project }">
            <ProjectStatusBadge :status="project.status" />
          </template>
        </VaDataTable>
      </div>
      <div v-else class="p-4 flex justify-center items-center text-[var(--va-secondary)]">No projects</div>
    </VaCardContent>
  </VaCard>
</template>
